<template>
	<view style="background-color: #f5f5f5;height: 100%;" >
		<view class="" >
			
			<uni-popup ref="popup" type="center" :animation="false">
			  <scroll-view scroll-y="true" >
			  <view class="pop">
				  <view class="pop-head">
				  	  <text @click="close()">关闭</text>
					<text>{{mobanList[selectindex].mouldname}}</text>
				  </view>
				  <view class="pop-main">
				  	<view class="item" v-for="(item, index) in mobanList[selectindex].groups" :key="index">
				  	      <view class="item-left">
							  <text>{{index+1}}</text>
				  	        <text style="margin-left: 20rpx;">{{ item.name }}</text>
				  	      </view>
				  	      <view class="item-right">
							  
				  	        <text>{{ item.miniGroups.length }}组 </text>
				  	      </view>
				  	    </view>
				  </view>
			<view class="" style="text-align: center;">
				<el-button @click="startxunlian(selectindex)">开始训练</el-button>
				<el-button @click="toplan(selectindex)">编辑模版</el-button>
			</view>
			  </view>
			  </scroll-view>
			</uni-popup>
			<uni-popup class="xuniancontent" ref="pop" type="bottom">
				<view class="xunlianmain">
					x113113
				
				</view>
			</uni-popup>

		</view>
		<view class="shequ">
			<!-- <button @click="toshequ()">前往社区</button> -->
				
		</view>
		<el-container>
		      <el-header>
				  <view class="lunbo">
				  	<image src="../../../static/shouye1.png" mode="广告" style="height: 400rpx;"></image>
				  </view>
			  </el-header>
		      <el-main>	 
			  <view class="select-moban">
	 	<!-- <el-button class="btn1" @click="tab(0)">官方模版</el-button> -->
		<el-button class="btn1" @click="tab(1)">个人模版</el-button>
	 </view>
	<view class="tuijian" v-show="number===0" >
		<view class="fenlei" >
			<el-row :gutter="20">
			    <el-col :span="8" v-for="(item,index1) in selecetList" :key="index1" style="margin-top: 10rpx;">
					<button :class="index1==xuhao?'btn2':'btn3'" @click="change(index1)" >
						{{item.option}}
					</button>
				</el-col>
			  
			  </el-row>
		</view>
		
		<view class="shou" v-show="xuhao===0">
			<view class="jian">
				减脂
			</view>
		</view>
		<view class="" v-show="xuhao===1">
			<view class="jian">
				减脂
			</view>
		</view>
		<view class="" v-show="xuhao===2">
			<view class="jian">
				增肌男
			</view>
		</view>
		<view class="" v-show="xuhao===3">
			<view class="jian">
				增肌女
			</view>
		</view>
		
	</view>
	<view class="geren" v-show="number===1">
		<view class="geren-top" >
			<view class="geren-top-item" v-for="(item,index) in mobanList" :key="index" style="" >
				  <view class="" style="display: flex;">
				  	  <view class="content-title" @click="open(index)" style="">
				  	  {{item.mouldname}}
				  	  </view>
					  <view class="">
					  	<image src="../../../static/delete.png" @click="delmoban(item.mouldid)" style="width: 50rpx; height: 50rpx;"></image>
					  </view>
				  </view>
					<view class="content-container">
						<view class="content-item" v-for="(item,index) in mobanList[index].groups" :key="index" >
							{{item.name}}
						</view>
					</view>
					<!-- <br /> -->
					<!-- <el-button @click="delmoban(item.mouldid)">删除</el-button> -->

				
			</view>
		</view>
	
	<button @click="toaddplan">添加模版</button>
		
	</view></el-main>
		    </el-container>

	</view>
</template>

<script>
	import { ref ,reactive} from 'vue'
	export default {
		data() {
			return {
				trainingItems:[{
					name:'卧推',
					sets:6,
					reps:99
				}],
				number:1,
				xuhao:0,
				selectindex:1,
				xunlianlist:{},
				mobanList:reactive([]),
					dataList:[
						{option:'官方模板'},
						{option:'个人模板'}
					],
					selecetList:[
						{
							option:'减脂塑性'
						},
						{
							option:'部位专供'
						},
						{
							option:"增肌 . 男"
						},
						{
							option:"增肌 . 女"
						},
						// {
						// 	option:"增肌 . 女"
						// },
						
					]
				
			}
		},
		onShow() {
			this.getmoban()
		},
		onLoad() {
			this.getmoban()
			
		},
		methods: {
			toshequ(){
				uni.navigateTo({
					url:'/pages/shequ/shequ'
				})
					
				
			},
			toaddplan(){
				uni.navigateTo({
				url:'/pages/edit/edit'
				})
			},
			toplan(index){
			uni.navigateTo({
				url:'/pages/plan/plan?index='+index
			})	
			},
			tab(index) {
							this.number=index
							if(index==1){
								this.getmoban()
							}
						},
			change(index){
				this.xuhao=index
			},
					open(index){
						this.selectindex=index
					        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
					        this.$refs.popup.open()
					      },
						  close(){
							  this.$refs.popup.close()
						  },
						  getmoban(){
							  uni.request({
							  	url:'http://localhost:8080/mould/select',
								method:'POST',
								 data:{
									 id:1
									 },
									 header:{'content-type':'application/x-www-form-urlencoded'},
								 success: (res) => {
								 	console.log(res)
									this.mobanList=res.data.data
									console.log(this.mobanList)
								 }
							  })
						  },
						  delmoban(delid){
							 uni.request({
							 	url:'http://localhost:8080/mould/delete',
							 	method:'POST',
							 	data:{
							 		id:delid,
							 	},
							 	header:{'content-type':'application/x-www-form-urlencoded'},
							 	success: (res) => {				
							 	 console.log(res.data)
								 this.getmoban()
							 	}
							 })
						  },
				startxunlian(index){
					// console.log(this.mobanList[index]);
					this.$refs.pop.open()
					this.$refs.popup.close()
					uni.request({
						url:'http://localhost:8082/exercise/addone',
									method:'POST',
								 data:{
								 historyid:11,
								 createtime:"1970-01-17 08:51:17",
								 plan:this.mobanList[index]
								 },
						 header:{'content-type':'application/json'},
							 success: (res) => {
						 	console.log(res)
								
							 }
					})
				}		
		}
	}
</script>

<style>
@import url(/pages/tabbar/xunlian/xunlian.css);
</style>
